<template>
    <Form ref="form" :model="form" :rules="ruleValidate" label-position="left" :label-width="100">

        <FormItem label="值班项" prop="watchlists_id">
            <Select v-model="form.watchlists_id">
                <Option v-for="item in parentList" :value="item.value" :key="item.value" placeholder="请选择值班项">{{ item.label }}</Option>
            </Select>
        </FormItem>

        <FormItem label="检查项名称" prop="name.zh">
            <Input v-model="form.name.zh" placeholder="输入检查项名称"></Input>
        </FormItem>

        <!-- <FormItem label="上级检查项" prop="pid">
            <Select v-model="form.pid">
                <Option v-for="item in paList" :value="item.value" :key="item.value" placeholder="请选择上级检查项">{{ item.label }}</Option>
            </Select>
        </FormItem> -->

        <FormItem label="值班老师" prop="data">
            <Cascader :data="data" v-model="form.data" filterable :load-data="loadData" placeholder="请选择值班老师"></Cascader>
        </FormItem>

        <FormItem>
            <Button type="primary" @click="handleSubmit('form')" :loading="butload">{{ condition?'修改':'添加' }}</Button>
        </FormItem>

    </Form>
</template>

<script>
export default {
    props: {
        condition: {
            type: [Boolean, Number],
            default: false
        }
    },
    data () {
        return {
            butload: false,
            form:{
                name: {
                    zh: null,
                    en: null,
                    mn: null,
                },
                pid: 0,
                sort: '0',
                watchlists_id: null,
                department_id: null,
                department_position_id: null,
                user_id: null,
                data: []
            },

            addurl: 'api/watchlists/v1/securityitem/add',
            editurl: 'api/watchlists/v1/securityitem/edit/' + this.condition,
            selUrl: 'api/watchlists/v1/securityitem/info/' + this.condition,

            ruleValidate: {
                watchlists_id: [
                    { required: true, type: 'number', message: '输选择值班项', trigger: 'change' }
                ],
                data: [
                    { required: true, type: 'array', message: '输选择值班老师', trigger: 'change' }
                ],
                'name.zh': [
                    { required: true, message: '输入检查项名称', trigger: 'blur' }
                ]
            },

            parentList: [],
            parenturl: 'api/watchlists/v1/securityclass/list',

            paList: [],
            paurl: 'api/watchlists/v1/securityitem/getPidData',
            
            data: [],
            durl: 'api/user/v1/get/all/department/list',
            purl: 'api/user/v1/get/position/list?department_id=',
            uurl: 'api/user/v1/get/position/users?position_id=',
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 表单验证
         * @param   {name}            要验证的表单
         * 
         ************************************************************/
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.butload = true
                    if (this.condition) {
                        this.editSubmit ()
                    } else {
                        this.addSubmit ()
                    }
                } else {
                    this.$Message.error('请检查填写内容');
                }
            })
        },
        
        /************************************************************
         * 
         * 执行添加数据
         * 
         ************************************************************/
        addSubmit () {
            let data = Object.assign({}, this.form)
            data.department_id = data.data[0]
            data.department_position_id = data.data[1]
            data.user_id = data.data[2]
            delete data.data
            this.$http.post(this.addurl, data).then(val=>{
                this.butload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.butload = false 
            })
        },
        
        /************************************************************
         * 
         * 执行修改数据
         * 
         ************************************************************/
        editSubmit () {
            let data = Object.assign({}, this.form)
            data.department_id = data.data[0]
            data.department_position_id = data.data[1]
            data.user_id = data.data[2]
            delete data.data
            this.$http.put(this.editurl, data).then(val=>{
                this.butload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.butload = false 
            })
        },
        
        /************************************************************
         * 
         * 部门岗位用户
         * 
         ************************************************************/
        loadData (item, callback) {
            item.loading = true
            if (item.state === 1) {
                this.positionData (item, callback)
            } 
            if (item.state === 2) {
                this.userData (item, callback)
            }
        },
        
        /************************************************************
         * 
         * 部门数据
         * 
         ************************************************************/
        departmentData () {
            this.$http.get(this.durl).then(val=>{
                this.data = val.data.map(el => ({
                    label: el.department_name.zh?el.department_name.zh:el.department_name.mn,
                    value: el.id,
                    state: 1,
                    loading: false,
                    children: []
                }))
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 岗位数据
         * 
         ************************************************************/
        positionData (item, callback) {
            this.$http.get(`${this.purl}[${item.value}]`).then(val=>{
                item.children = val.data.map(el => ({
                    label: el.position_name.zh?el.position_name.zh:el.position_name.mn,
                    value: el.id,
                    state: 2,
                    loading: false,
                    children: []
                }))
                item.loading = false
                callback ()
            }).catch(err => {
                item.loading = false
            })
        },
        
        /************************************************************
         * 
         * 用户数据
         * 
         ************************************************************/
        userData (item, callback) {
            this.$http.get(`${this.uurl}[${item.value}]`).then(val=>{
                item.children = val.data.map(el => ({
                    label: el.teacher.teacher_name.zh,
                    value: el.id
                }))
                item.loading = false
                callback ()
            }).catch(err => {
                item.loading = false
            })
        },
        
        /************************************************************
         * 
         * 0检查项
         * 
         ************************************************************/
        pidData () {
            this.$http.get(this.paurl).then(val=>{
                this.paList = val.data
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 执行修改数据
         * 
         ************************************************************/
        queryData () {
            this.$http.get(this.parenturl).then(val=>{
                this.handelData (val.data, false)
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 处理数据
         * 
         ************************************************************/
        handelData (data, label) {
            data.forEach(el => {
                let obj = {
                    label: label ? `${label} - ${el.watchlists_name.zh}` : `${el.watchlists_name.zh}`,
                    value: el.watchlists_id,
                }
                if (el.childs.length) this.handelData (el.childs, obj.label)
                this.parentList.push (obj)
            })
        },
        
        /************************************************************
         * 
         * 单条查询
         * 
         ************************************************************/
        selData(){
            this.$http.get(this.selUrl).then(val=>{
                this.form.name = val.data.name
                this.form.watchlists_id = val.data.watchlists_id
                this.form.data = [val.data.department_id, val.data.department_position_id, val.data.user_id]
            }).catch(err => {
            })
        }
    },
    created () {
        this.pidData ()
        this.queryData ()
        this.departmentData ()
        if (this.condition) this.selData ()
    },
};
</script>